<template>
  <div class="container">
    <div class="swiper">
      <div class="swiperItem">
        <swiper :options="swiper">
          <swiperSlide v-for="(temp,index) in 5" :key="index">
            <img src="http://placehold.it/1200x360" alt="">
          </swiperSlide>
        </swiper>
      </div>
    </div>
    <div class="content">
        <menus></menus>
        <random></random>
    </div>
    <codes></codes>
  </div>

</template>

<script>
import menus from "@/components/menu"
import random from "@/components/random"
import codes from "@/components/code"
import 'swiper/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  components: {
    menus,
    random,
    codes,
    swiperSlide,
    swiper
  },
  data() {
    return {
      show: false,
      swiper:{
        autoplay: true,
      }
    };
  },
  created(){
    this.$store.commit("SETTING_HEADER_ACTIVE",0)
  }
};
</script>

<style lang="less">
.container {
  background: #fff;
  .swiper {
    width: 100%;
    background: #f2f2f2;
    // height: 61vh;
    padding: 22px 0;
    .swiperItem {
      background: #fff;
      width: 1200px;
      height: 360px;
      margin: 0 auto;
    }
  }
  .content {
    max-width: 1200px;
    margin: 0 auto;
  }
}
</style>